CSS @media : Modèles de Media Queries Avancés pour un Web Véritablement Réactif

Dans le paysage dynamique du développement web moderne, créer des expériences qui s'adaptent de manière fluide à un éventail toujours plus large d'appareils et de contextes utilisateur n'est pas seulement une bonne pratique – c'est un impératif. Des moniteurs de bureau haute résolution aux smartphones compacts, des utilisateurs en centres-villes animés avec un internet haut débit à ceux des zones reculées avec une bande passante limitée, et des personnes préférant les thèmes sombres à celles nécessitant des mouvements réduits, le web doit être flexible. C'est là que les règles CSS @media, pierre angulaire du design réactif, transcendent leur application de base pour devenir de puissants outils d'adaptabilité avancée.

Bien que de nombreux développeurs connaissent l'utilisation de @media pour de simples ajustements de points de rupture, la véritable puissance réside dans ses modèles avancés, ses opérateurs logiques et sa capacité à exploiter les préférences de l'utilisateur et de l'environnement. Ce guide complet vous emmènera au-delà des fondamentaux, explorant le monde complexe des fonctionnalités de media queries avancées qui vous permettent de créer des applications web véritablement résilientes, inclusives et accessibles à l'échelle mondiale.

Nous explorerons des techniques qui permettent à vos designs de réagir non seulement à la taille de l'écran, mais aussi aux capacités de l'appareil, aux paramètres d'accessibilité de l'utilisateur et même à l'environnement ambiant, garantissant une expérience supérieure pour chaque utilisateur, partout.

Les Fondamentaux : Bref Récapitulatif de la Syntaxe @media de Base

Avant de nous plonger dans les modèles avancés, rappelons rapidement les bases. Une media query de base se compose d'un type de média optionnel (comme screen, print, all) et d'une ou plusieurs fonctionnalités de média (comme min-width, orientation). Les styles à l'intérieur du bloc @media ne sont appliqués que si les conditions sont remplies.

            /* Exemple de base : Les styles s'appliquent uniquement sur les écrans de plus de 768px de large */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Les styles s'appliquent uniquement lors de l'impression de la page */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Cette compréhension fondamentale est cruciale, car les modèles avancés s'appuient directement sur elle.

Au-delà des Points de Rupture : Comprendre les Fonctionnalités des Media Queries

Bien que width et height soient les fonctionnalités de média les plus fréquemment utilisées, un riche ensemble d'autres fonctionnalités permet des décisions de conception beaucoup plus nuancées. Comprendre ces capacités est essentiel pour dépasser les mises en page génériques mobile/tablette/bureau.

Fonctionnalités Basées sur le Viewport (Les Suspects Habituels et Plus)

Ces fonctionnalités concernent les dimensions et les caractéristiques du viewport du navigateur, et non l'écran physique de l'appareil.

• width, height, min-width, max-width, min-height, max-height : Ce sont les piliers du design réactif. Ils vous permettent de définir des points de rupture en fonction de la zone visible du navigateur. Par exemple, vous pourriez passer d'une mise en page à une seule colonne à une mise en page multi-colonnes lorsque min-width atteint une certaine valeur en pixels.

            /* Appliquer une mise en page à deux colonnes sur les écrans plus larges */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio : Ces fonctionnalités vous permettent de cibler des designs en fonction du rapport entre la largeur et la hauteur du viewport. C'est incroyablement utile pour optimiser le contenu pour diverses formes d'écrans, des moniteurs ultra-larges aux smartphones hauts.

            /* Optimiser l'image principale pour les écrans ultra-larges (ex: 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation : Cette fonctionnalité détecte si le viewport est en mode portrait (hauteur supérieure ou égale à la largeur) ou landscape (largeur supérieure à la hauteur). C'est particulièrement vital pour les expériences sur mobile et tablette.

            /* Ajuster la mise en page pour l'orientation paysage sur les tablettes */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Fonctionnalités Basées sur l'Appareil (Moins Courantes, mais Utiles)

Ces fonctionnalités concernent les caractéristiques de l'appareil de sortie physique. Bien que les requêtes basées sur le viewport soient généralement préférées pour la mise en page du contenu, les fonctionnalités basées sur l'appareil ont des niches spécifiques.

• device-width, device-height (et leurs variantes min/max) : Historiquement, elles étaient utilisées pour cibler des résolutions d'appareils spécifiques. Cependant, avec les tailles de fenêtres de navigateur variables sur les ordinateurs de bureau et les tablettes, et les différentes densités de pixels, se fier à elles peut être peu fiable pour la mise en page générale. Les dimensions du viewport sont presque toujours plus appropriées. Elles peuvent encore être considérées dans des scénarios très spécifiques, comme des applications conçues pour des écrans de taille fixe comme les kiosques, mais c'est rare dans le développement web typique.
• resolution : Cette fonctionnalité vous permet de cibler les écrans en fonction de leur densité de pixels (DPI ou DPX – dots per pixel). C'est crucial pour servir des images de haute qualité aux écrans "Retina" ou à haute densité de pixels (high-DPI) sans livrer des fichiers inutilement volumineux aux écrans standards.

            /* Servir une image de fond de plus haute résolution pour les écrans à haute densité de pixels (high-DPI) */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Notez l'utilisation de dpi et dppx pour couvrir différentes interprétations des navigateurs et pérenniser votre code. L'unité dppx (dots per pixel unit) est généralement préférée car elle est plus indépendante de l'appareil.

Opérateurs Logiques : Combiner les Conditions avec Précision

Pour construire des media queries vraiment sophistiquées, vous devez combiner plusieurs conditions en utilisant des opérateurs logiques. Ceux-ci vous permettent de spécifier exactement quand un ensemble de styles doit s'appliquer.

Opérateur `and` : Toutes les Conditions Doivent être Vraies

Le mot-clé and combine plusieurs fonctionnalités de média ou types de média et fonctionnalités. Toutes les conditions spécifiées doivent être évaluées comme vraies pour que les styles soient appliqués.

            /* Appliquer les styles uniquement sur les écrans entre 768px et 1024px de large */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Ceci est extrêmement utile pour cibler des plages d'appareils spécifiques, comme les tablettes en mode portrait, ou pour créer des mises en page hautement personnalisées pour des dimensions d'écran très spécifiques.

Opérateur `or` (`, ` séparé par une virgule) : N'importe quelle Condition Peut être Vraie

Dans les règles @media CSS, une virgule (`,`) agit comme un OU logique. Si l'une des media queries séparées par des virgules est évaluée comme vraie, les styles associés sont appliqués.

            /* Les styles s'appliquent si l'écran est plus large que 1200px OU si l'appareil est en orientation paysage (quelle que soit la largeur) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Les styles s'appliquent pour le média d'impression OU pour les écrans avec une résolution minimale */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Pour un meilleur rendu à l'impression/haute résolution */
  }
}

            

              
                Copy
              
            
          

Cette fonctionnalité puissante vous permet de regrouper des styles qui devraient s'appliquer sous plusieurs conditions distinctes, menant à des feuilles de style plus concises et lisibles.

Opérateur `not` : Inverser une Condition

Le mot-clé not nie une media query entière, ce qui signifie que les styles sont appliqués si la condition spécifiée n'est pas remplie.

            /* Appliquer les styles à tous les types de médias SAUF l'impression */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Appliquer les styles si ce n'est PAS un écran avec une largeur minimale de 768px (c.-à-d. pour l'impression ou les écrans plus petits que 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

L'opérateur not peut être délicat et doit être utilisé judicieusement. Assurez-vous de bien comprendre la portée de ce qui est nié. Par exemple, @media not screen and (min-width: 768px) signifie "pas un écran ET une largeur minimale de 768px", ce qui est logiquement équivalent à "si ce n'est pas un écran OU si c'est un écran ET que la largeur maximale est inférieure à 768px". Il est souvent plus clair d'utiliser max-width au lieu de not min-width.

Mot-clé `only` : Assurer la Compatibilité Ascendante (Contexte Historique)

Le mot-clé only a été introduit pour masquer les feuilles de style aux anciens navigateurs qui ne prenaient pas entièrement en charge les media queries. Si un ancien navigateur rencontrait @media only screen, il ignorait généralement la règle car il ne reconnaissait pas only comme un type de média valide. Les navigateurs modernes l'analysent correctement. Compte tenu du large support des media queries par les navigateurs aujourd'hui, only est largement redondant pour les nouveaux développements mais peut être vu dans les bases de code héritées.

            /* Exemple : Styles appliqués uniquement sur les écrans, cachés des très vieux navigateurs */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Fonctionnalités de Média de Préférence Utilisateur : Adopter l'Inclusivité et l'Accessibilité

Ce sont peut-être les fonctionnalités de media queries avancées les plus excitantes et les plus percutantes, car elles permettent aux développeurs de répondre directement aux préférences des utilisateurs au niveau du système d'exploitation ou du navigateur, conduisant à des expériences significativement plus accessibles et conviviales. C'est particulièrement important pour un public mondial aux besoins et environnements divers.

prefers-color-scheme : Modes Clair et Sombre

Cette fonctionnalité détecte si l'utilisateur a demandé un thème de couleurs clair ou sombre pour son système d'exploitation ou son agent utilisateur. La mise en œuvre d'un mode sombre améliore considérablement l'accessibilité et le confort, en particulier dans les environnements à faible luminosité ou pour les utilisateurs sensibles à la lumière.

• no-preference : Aucune préférence n'est indiquée par l'utilisateur.
• light : L'utilisateur préfère un thème clair.
• dark : L'utilisateur préfère un thème sombre.

            /* Thème par défaut (clair) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Pour des implémentations de mode sombre plus robustes, les Propriétés Personnalisées CSS (variables) sont inestimables, vous permettant de définir des palettes de couleurs de manière dynamique.

prefers-reduced-motion : Respecter le Confort de l'Utilisateur

Les animations et les transitions peuvent améliorer l'expérience utilisateur, mais pour certaines personnes (par exemple, celles souffrant de troubles vestibulaires, de TDAH, ou simplement celles qui trouvent le mouvement distrayant), elles peuvent causer de l'inconfort ou même des nausées. Cette fonctionnalité détecte si l'utilisateur a demandé un minimum d'animations non essentielles.

• no-preference : Aucune préférence n'est indiquée.
• reduce : L'utilisateur préfère un mouvement réduit.

            /* Animation par défaut */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Désactiver le défilement fluide */
  }
}

            

              
                Copy
              
            
          

C'est une bonne pratique d'accessibilité forte de toujours fournir une alternative à mouvement réduit. Cela aide à construire un web utilisable et confortable pour tout le monde, quelles que soient leurs sensibilités individuelles.

prefers-contrast : Ajuster le Contraste Visuel

Cette fonctionnalité détecte si l'utilisateur a demandé un niveau de contraste spécifique pour son système d'exploitation. C'est très bénéfique pour les utilisateurs malvoyants ou ayant certaines déficiences de perception des couleurs.

• no-preference : Aucune préférence.
• less : L'utilisateur préfère moins de contraste.
• more : L'utilisateur préfère plus de contraste.
• custom : L'utilisateur a un réglage de contraste personnalisé (moins courant).

            /* Styles pour un contraste accru */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

En fournissant des styles pour différentes préférences de contraste, vous contribuez activement à un environnement numérique plus accessible et inclusif pour les utilisateurs du monde entier.

forced-colors : Gérer les Palettes de Couleurs Forcées par le Système

Lorsqu'un système d'exploitation (comme le mode Contraste élevé de Windows) impose une palette de couleurs spécifique aux applications, cela peut parfois outrepasser ou casser les designs web personnalisés. La fonctionnalité de média forced-colors aide les développeurs à s'adapter à ce scénario, leur permettant de fournir des styles qui fonctionnent bien dans les contraintes de couleurs forcées.

• active : L'agent utilisateur a un mode de couleurs forcées actif.
• none : Aucun mode de couleurs forcées n'est actif.

            /* Ajustements pour les utilisateurs du mode Contraste élevé */
@media (forced-colors: active) {
  /* S'assurer que les éléments ont des bordures visibles */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Supprimer les images de fond qui pourraient masquer le texte */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Les rendre visibles */
  }
}

            

              
                Copy
              
            
          

Cette fonctionnalité est essentielle pour assurer la conformité avec les normes d'accessibilité (comme les WCAG) et fournir une expérience fonctionnelle aux utilisateurs qui dépendent de ces ajustements au niveau du système.

Fonctionnalités de Média Environnementales : S'adapter aux Capacités de l'Appareil

Ces fonctionnalités de média vous permettent d'adapter les expériences en fonction de la manière dont un utilisateur interagit avec son appareil, comme le type de dispositif de pointage qu'il utilise ou les capacités de son écran.

hover et any-hover : Distinguer les Dispositifs de Pointage

Ces fonctionnalités aident à différencier les appareils qui prennent en charge le survol (par exemple, les ordinateurs de bureau avec une souris) de ceux qui utilisent principalement le toucher (par exemple, les smartphones, les tablettes). C'est crucial pour éviter des modèles d'expérience utilisateur frustrants sur les appareils uniquement tactiles.

• hover : Se réfère au mécanisme de saisie principal.
• any-hover : Se réfère à n'importe quel mécanisme de saisie disponible.
• Valeurs : none (pas de support du survol), hover (support du survol).

            /* Afficher les infobulles uniquement sur les appareils avec capacité de survol */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Sur les appareils tactiles, les infobulles peuvent être déclenchées par le focus ou ne pas être affichées du tout */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Utiliser any-hover est souvent plus robuste, car un appareil peut avoir à la fois une entrée tactile et une souris (par exemple, un ordinateur portable 2-en-1). Si any-hover est hover, alors au moins une méthode d'entrée prend en charge le survol. Si any-hover est none, alors aucune méthode d'entrée ne prend en charge le survol.

pointer et any-pointer : Distinguer la Précision du Pointeur

Ces fonctionnalités détectent la précision du dispositif de pointage principal (pointer) ou de tout dispositif disponible (any-pointer).

• none : Pas de dispositif de pointage.
• coarse : Dispositif de pointage imprécis (par exemple, un doigt sur un écran tactile).
• fine : Dispositif de pointage précis (par exemple, une souris, un stylet).

            /* Augmenter la taille de la cible tactile pour les pointeurs imprécis */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Réduire le padding pour les pointeurs précis */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Ceci est essentiel pour concevoir des interfaces tactiles où les cibles de pression doivent être suffisamment grandes pour une entrée au doigt, tout en permettant un design plus compact lorsque une interaction précise avec la souris est disponible. Cela a un impact direct sur l'utilisabilité à travers un large éventail d'appareils et de capacités utilisateur, en particulier sur les marchés mondiaux où les appareils tactiles sont prédominants.

color-gamut : Au-delà du sRGB

La fonctionnalité de média color-gamut vous permet de détecter si l'écran de l'utilisateur prend en charge une gamme de couleurs plus large que le standard sRGB (par exemple, P3 ou Rec. 2020). Cela permet aux concepteurs d'utiliser une palette de couleurs plus riche et plus vibrante sur les écrans compatibles.

• srgb : Gamme sRGB standard.
• p3 : L'écran prend en charge la gamme P3 (plus large que sRGB).
• rec2020 : L'écran prend en charge la gamme Rec. 2020 (encore plus large).

            /* Utiliser les couleurs P3 pour des éléments de marque plus vibrants sur les écrans compatibles */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Un rouge vibrant en P3 */
  }
}

            

              
                Copy
              
            
          

Bien qu'encore émergente, cette fonctionnalité pointe vers un avenir d'expériences web plus époustouflantes visuellement et plus précises, en particulier pour les industries créatives ou la diffusion de contenu haute fidélité.

update : Gérer les Taux de Rafraîchissement de l'Écran

Cette fonctionnalité indique à quelle vitesse le périphérique de sortie peut modifier l'apparence du contenu. Ceci est utile pour optimiser les animations et le contenu dynamique pour différents types d'écrans.

• none : Ne peut pas se mettre à jour (par exemple, un document imprimé).
• slow : Se met à jour lentement (par exemple, les écrans à encre électronique, certains appareils plus anciens).
• fast : Se met à jour rapidement (par exemple, les moniteurs d'ordinateur typiques, les smartphones).

            /* Réduire les animations complexes sur les écrans à mise à jour lente */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Cette fonctionnalité aide à garantir que les utilisateurs sur des appareils comme les liseuses, qui privilégient la durée de vie de la batterie et l'affichage statique, ne reçoivent pas une expérience dégradée ou saccadée à cause d'animations inappropriées.

Techniques Avancées et Bonnes Pratiques

Au-delà des fonctionnalités de média individuelles, la manière dont vous structurez votre CSS et combinez ces modèles peut avoir un impact significatif sur la maintenabilité, les performances et la qualité globale de la conception.

Mobile-First vs. Desktop-First : Un Choix Stratégique

Le choix entre une approche mobile-first et desktop-first est fondamental pour la stratégie de design réactif.

• Mobile-First (min-width) :
  • Commencez par concevoir et styliser pour le plus petit écran (mobile).
  • Utilisez des media queries min-width pour ajouter progressivement des styles pour les écrans plus grands.
  • Avantages :
    • Performance : Les appareils mobiles ont souvent moins de puissance de traitement et des connexions internet plus lentes. Une approche mobile-first garantit que seuls les styles nécessaires sont chargés initialement, ce qui accélère le chargement des pages. C'est essentiel pour les utilisateurs dans les régions où l'infrastructure internet est en développement.
    • Amélioration Progressive : Vous partez d'une expérience de base solide, en ajoutant des améliorations pour les appareils plus capables.
    • Focus : Encourage les développeurs à prioriser le contenu et les fonctionnalités essentiels.
• Desktop-First (max-width) :
  • Commencez par concevoir pour les grands écrans (bureau).
  • Utilisez des media queries max-width pour surcharger les styles pour les écrans plus petits.
  • Avantages : Peut être plus facile pour les équipes habituées au design de bureau traditionnel, mais conduit souvent à des surcharges plus complexes pour le mobile.

Pour la plupart des projets modernes, en particulier ceux ciblant un public mondial avec des capacités d'appareils et des conditions de réseau diverses, l'approche mobile-first est fortement recommandée.

            /* Approche mobile-first : Les styles pour petit écran sont par défaut */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Styles spécifiques aux tablettes */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Styles spécifiques au bureau */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Utiliser les Propriétés Personnalisées CSS (Variables) avec les Media Queries

Combiner les Propriétés Personnalisées CSS (variables) avec les media queries change la donne pour la maintenance de grandes feuilles de style réactives. Au lieu de répéter des valeurs, vous les définissez une fois et changez leurs valeurs à l'intérieur des media queries.

            /* Définir les valeurs par défaut (mobile) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Ajuster les valeurs pour les écrans de tablette */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Ajuster les valeurs pour les écrans de bureau */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Utiliser les variables dans tout votre CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Appliquer les styles pour les écrans entre 600px et 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Équivalent avec la syntaxe traditionnelle */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Cacher les éléments non essentiels pour l'impression */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* S'assurer que le texte est noir sur blanc pour la lisibilité */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Afficher les URL complètes pour les liens */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Gérer les sauts de page de manière appropriée */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first : Par défaut, un menu caché, hors de l'écran */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablette & Bureau : Afficher un menu horizontal */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Ajustements supplémentaires pour les très grands écrans ou des ratios d'aspect spécifiques */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Image de fond par défaut (mobile/basse résolution) */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Image de fond de résolution moyenne/bureau */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Image de fond spécifique pour haute densité de pixels (Retina) */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Typographie fluide utilisant calc() et clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Ajuster la grille pour les tablettes en paysage, en préférant plus de colonnes */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ajuster l'épaisseur de la police pour le mode à contraste élevé pour une meilleure lisibilité */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Variables de couleur centralisées, adaptables au mode clair/sombre */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Réduire les animations si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ajustements pour le mode de couleurs forcées */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* S'assurer que les bordures des boutons sont visibles */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Exemple d'une future Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy